<template>
  <div>
    <!-- 顶部四个卡片 -->
    <el-row :gutter="12">
      <el-col
        :span="6"
        class="d-flex"
        v-for="(item, index) in cards"
        :key="index"
      >
        <el-card shadow="hover" style="width: 100%">
          <div class="card1 d-flex align-items-center">
            <i
              class="mb-0 text-white bg-primary h4"
              :class="[item.icon, item.bac]"
            ></i>
            <div class="pl-2">
              <h4 class="mb-0">{{ item.num }}</h4>
              <small class="text-muted">{{ item.desc }}</small>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- /顶部四个卡片 -->
    <el-row :gutter="10">
      <!-- 左边两个卡片 -->
      <el-col
        :span="12"
        class="d-flex flex-column"
        style="justify-content: space-between"
      >
        <el-card
          style="height: 185px"
          shadow="never"
          v-for="(item1, index1) in tips"
          :key="index1"
        >
          <div slot="header" class="d-flex justify-content-between">
            <span>{{ item1.title }}</span>
            <small class="text-muted">{{ item1.desc }}</small>
          </div>
          <div class="row">
            <div
              :class="item1.list.length === 4 ? 'col-3' : 'col-2 px-1'"
              v-for="(item2, index2) in item1.list"
              :key="index2"
            >
              <button type="button" class="btn btn-light w-100">
                <h4 class="mb-1">{{ item2.num }}</h4>
                <small class="text-muted">{{ item2.status }}</small>
              </button>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- /左边两个卡片 -->
      <!-- 右边卡片 -->
      <el-col :span="12">
        <el-card style="height: 370px">
          <div slot="header" class="d-flex justify-content-between">
            <span>订单总数统计</span>
            <small class="text-muted">订单数量</small>
          </div>
          <div ref="mychart" style="height: 270px; width: 100%"></div>
        </el-card>
      </el-col>
      <!-- /右边卡片 -->
    </el-row>
    <!-- 底部卡片 -->
    <el-row :gutter="10" class="my-3">
      <!-- 销售情况统计 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="d-flex justify-content-between">
            <span>销售情况统计</span>
            <small class="text-muted"
              >按周期统计商家店铺的订单量和订单金额</small
            >
          </div>
          <div class="media align-items-center border">
            <span class="border px-3 py-4 bg-light">昨日销量</span>
            <div class="media-body">
              <div class="border-bottom pl-3 pb-2">
                <span>订单量（件）</span>12
              </div>
              <div class="pl-3 pt-1"><span>订单量（件）</span>13</div>
            </div>
          </div>
          <div class="media align-items-center border mt-5">
            <span class="border px-3 py-4 bg-light">本月销量</span>
            <div class="media-body">
              <div class="border-bottom pl-3 pb-2">
                <span>订单量（件）</span>12
              </div>
              <div class="pl-3 pt-1"><span>订单量（件）</span>13</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- /销售情况统计 -->
      <!-- 单品销售排名 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="d-flex justify-content-between">
            <span>单品销售排名</span>
            <small class="text-muted"
              >按周期统计商家店铺的订单量和订单金额</small
            >
          </div>
          <div>
            <el-table :data="tableData" height="200" border style="width: 100%">
              <el-table-column type="index" label="#" width="50">
              </el-table-column>
              <el-table-column prop="name" label="商品信息" width="280">
              </el-table-column>
              <el-table-column prop="num" label="销量"> </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!-- /单品销售排名 -->
    </el-row>
    <!-- /底部卡片 -->
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "index",
  data() {
    return {
         tableData: [{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        },{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        },{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        },{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        },{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        },{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        },{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        },{
          name: '小天鹅圆桶洗衣机销量大酬宾活动VIP优惠',
          num: 55
        }],
      cards: [
        {
          icon: "el-icon-user-solid",
          num: 30,
          desc: "关注人数（个）",
          bac: "bg-primary",
        },
        {
          icon: "el-icon-s-finance",
          num: 120,
          desc: "订单总数（笔）",
          bac: "bg-success",
        },
        {
          icon: "el-icon-s-order",
          num: 4183.8,
          desc: "今日订单总金额（元）",
          bac: "bg-danger",
        },
        {
          icon: "el-icon-s-data",
          num: 100,
          desc: "本月销量（笔）",
          bac: "bg-warning",
        },
      ],
      tips: [
        {
          title: "店铺及商品提示",
          desc: "您需要关注的店铺信息以及待处理事项",
          list: [
            { num: 64, status: "出售中" },
            { num: 10, status: "待回复" },
            { num: 0, status: "库存预警" },
            { num: 3, status: "仓库中" },
          ],
        },
        {
          title: "交易提示",
          desc: "您需要立即处理的交易订单",
          list: [
            { num: 0, status: "待付款" },
            { num: 10, status: "待发货" },
            { num: 0, status: "已发货" },
            { num: 3, status: "已收货" },
            { num: 3, status: "退款中" },
            { num: 3, status: "待售后" },
          ],
        },
      ],
    };
  },
  components: {},
  props: {},
  created() {},
  computed: {},
  watch: {},
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(this.$refs.mychart);
      myChart.setOption({
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.card1 {
  i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
</style>
